<template>
    <div>
        <global-tables
            @handleAllSelect="handleAllSelect"
            @changePage="handleChangePage"
            :list="list"
            :total="total"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div></div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <div class="table-top-wrap-bottom">
                                <div>
                                    <input
                                        type="text"
                                        class="style-input"
                                        @keyup.enter="handleSearch"
                                        v-model="search.keyword"
                                        placeholder="请输入商品编号"
                                        style="width:120px;margin-right:5px"
                                    >
                                    <i-input style="display:none"></i-input>
                                </div>
                                <div>
                                    <input
                                        type="text"
                                        class="style-input"
                                        @keyup.enter="handleSearch"
                                        v-model="search.keyword"
                                        placeholder="请输入商品名称"
                                        style="width:120px;margin-right:5px"
                                    >
                                    <i-input style="display:none"></i-input>
                                </div>
                                <div>
                                    <input
                                        type="text"
                                        class="style-input"
                                        @keyup.enter="handleSearch"
                                        v-model="search.keyword"
                                        placeholder="请输入商品类别"
                                        style="width:120px;"
                                    >
                                    <i-input style="display:none"></i-input>
                                </div>
                            </div>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
    </div>
</template>

<script>
/**
 *
 */
import Api from './service';
import GlobalTables from '@/components/GlobalTables';
import { getdate } from '@/util';
export default {
    name: 'PurchaseListDetail',
    components: {
        GlobalTables
    },
    data() {
        return {
            list: [],
            data4: [],
            total: 0,
            itemId: 0,
            productsList: [],
            loading: true,
            type: '',
            isPSID: true,
            PSIDlist: [],
            autoComplete: [],
            isModal: false,
            allSelectArr: null,
            ModalTitle: '商品',
            goodsId: {
                mid: ''
            },
            addarr: [],
            addimg: [],
            MarketingProducts: [],
            formItem: this.initFormItem(),
            search: {
                keyword: '',
                pageindex: 1,
                pagesize: 10
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '商品图片',
                    width: 90,
                    render: (h, params) => {
                        const { PictureSmall } = params.row;
                        return h('div', [
                            h('Avatar', {
                                props: {
                                    src: PictureSmall,
                                    shape: 'square',
                                    size: 'large'
                                },
                                style: {
                                    margin: '5px 0'
                                }
                            })
                        ]);
                    }
                },
                {
                    title: '名称',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Poptip',
                                {
                                    props: { placement: 'bottom' }
                                },
                                [
                                    h(
                                        'span',
                                        {
                                            style: {
                                                display: 'inline-block',
                                                width: params.column._width * 0.6 + 'px',
                                                overflow: 'hidden',
                                                textOverflow: 'ellipsis',
                                                whiteSpace: 'nowrap'
                                            }
                                        },
                                        params.row.ProName
                                    ),
                                    h(
                                        'span',
                                        {
                                            slot: 'content',
                                            style: {
                                                whiteSpace: 'normal',
                                                wordBreak: 'break-all'
                                            }
                                        },
                                        params.row.ProName
                                    )
                                ]
                            )
                        ]);
                    }
                },
                {
                    title: '商品编号 / 货号 / 条码',
                    width: 160,
                    render: (h, params) => {
                        const { SKU, SupCode, BarCode } = params.row;
                        const data = {
                            SKU: SKU ? SKU : '',
                            SupCode: SupCode ? SupCode : '',
                            BarCode: BarCode ? BarCode : ''
                        };
                        return h('div', [
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                'SKU ' + data.SKU
                            ),
                            h('p', {}, '货号 ' + data.SupCode),
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                '条形码 ' + data.BarCode
                            )
                        ]);
                    }
                },
                {
                    title: '商品类别',
                    width: 110,
                    render: (h, params) => {
                        const { TypeOneName, TypeTwoName, TypeThreeName } = params.row;
                        const data = {
                            TypeOneName: TypeOneName ? TypeOneName : '',
                            TypeTwoName: TypeTwoName ? TypeTwoName : '',
                            TypeThreeName: TypeThreeName ? TypeThreeName : ''
                        };
                        return h('div', [
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.TypeOneName
                            ),
                            h('p', {}, data.TypeTwoName),
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.TypeThreeName
                            )
                        ]);
                    }
                },
                {
                    title: '商品价格',
                    width: 90,
                    render: (h, params) => {
                        const { PriceOld, PriceNew, Commission } = params.row;
                        const data = {
                            PriceOld: PriceOld ? '原价 / ' + PriceOld : '',
                            PriceNew: PriceNew ? '售价 / ' + PriceNew : '',
                            Commission: Commission ? '佣金 / ' + Commission : ''
                        };
                        return h('div', [
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.PriceOld
                            ),
                            h('p', {}, data.PriceNew),
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.Commission
                            )
                        ]);
                    }
                },
                {
                    title: '商品库存',
                    width: 90,
                    render: (h, params) => {
                        const { Stock, RealCount, StockWarn } = params.row;
                        const data = {
                            Stock: Stock ? '剩余 / ' + Stock : '',
                            RealCount: RealCount ? '销量 / ' + RealCount : '',
                            StockWarn: StockWarn ? '警戒 / ' + StockWarn : ''
                        };
                        return h('div', [
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.Stock
                            ),
                            h('p', {}, data.RealCount),
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.StockWarn
                            )
                        ]);
                    }
                },
                {
                    title: '规格',
                    width: 70,
                    key: 'ProName',
                    render: (h, params) => {
                        const { SpecCount } = params.row;
                        if (SpecCount > 0) {
                            return h('div', [h('span', {}, '有')]);
                        } else {
                            return h('div', [h('span', {}, '无')]);
                        }
                    }
                },
                {
                    title: '状态',
                    width: 80,
                    render: (h, params) => {
                        const { State } = params.row;
                        if (State == 1) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'processing',
                                        text: '上架'
                                    }
                                })
                            ]);
                        } else {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'error',
                                        text: '下架'
                                    }
                                })
                            ]);
                        }
                    }
                },
                {
                    title: '操作时间',
                    width: '170px',
                    render: (h, params) => {
                        const { CreateTime, LastModifyTime, Creator, Modifier } = params.row;
                        const data = {
                            CreateTime:
                                (CreateTime ? '(建) ' + getdate(new Date(CreateTime).getTime()) : '') + (Creator ? Creator : ''),
                            LastModifyTime:
                                (LastModifyTime ? '(改) ' + getdate(new Date(LastModifyTime).getTime()) : '') +
                                (Modifier ? Modifier : '')
                        };
                        return h('div', [
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.CreateTime
                            ),
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.LastModifyTime
                            )
                        ]);
                    }
                },
                {
                    title: '操作',
                    width: '130px',
                    align: 'center',
                    render: (h, params) => {
                        // const { isEdit, isNorm } = this;
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleBtnClick(params.row, 'add');
                                        }
                                    }
                                },
                                '添加'
                            )
                        ]);
                    }
                }
            ]
        };
    },
    methods: {
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            Api.goodsList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            if (type == 'add') {
                this.$store.state.product = item;
                this.$router.push({
                    path: `/marketing-orders`
                });
            }
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 表单数据 */
        initFormItem() {
            return {
                PID: '',
                Remark: '',
                OrderType: '1',
                Cost: 0,
                Count: 0,
                OrderID: this.$route.params.id,
                OrderCode: this.$route.params.code,
                State: 0
            };
        }
    },
    mounted() {
        /* 列表请求 */
        const { id } = this.$route.params;
        this.goodsId.mid = id;
        this.getTablesListData();
    }
};
</script>

<style lang="less" scoped>
</style>

<style>
</style>

